<template>
  <div class="overview">
    <ul class="ov_first">
      <li>
        <div>
          <span>浏览次数PV</span>
          <img src="./images/tishi.png" alt="">
        </div>
        <span class="num">500</span>
      </li>
      <li>
        <div>
          <span>独立访客UV</span>
          <img src="./images/tishi.png" alt="">
        </div>
        <span class="num">500</span>
      </li>
      <li>
        <div>
          <span>IP</span>
          <img src="./images/tishi.png" alt="">
        </div>
        <span class="num">500</span>
      </li>
      <li>
        <div>
          <span>访客统计</span>
          <img src="./images/tishi.png" alt="">
        </div>
        <span class="num">500</span>
      </li>
    </ul>

    <div class="ov_second">
      <div class="ov_second01">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <ul class="ov_second02">
        <li>
          <div class="ov_second02_li_div">
            <span>浏览次数PV</span>
            <P>0</P>
          </div>
        </li>
        <li>
          <div class="ov_second02_li_div">
            <span>独立访客UV</span>
            <P>0</P>
          </div>
        </li>
        <li>
          <div class="ov_second02_li_div">
            <span>IP</span>
            <P>0</P>
          </div>
        </li>
        <li>
          <div class="liuliang">
            <span>当月流量：500UV</span>
            <span>已使用：0UV</span>
            <a href="">立即升级，拥有无限流量</a>
          </div>
        </li>
      </ul>
      <div class="ov_second03">
        <ve-line :data="chartData1" :settings="chartSettings1"></ve-line>
      </div>
    </div>

    <div class="ov_third">
      <div class="ov_third_01 ov_third_list">
        <div class="ov_third_list_top">
          新老访客
        </div>
        <div class="ov_third_01_div">
          <ve-pie :data="chartData2"></ve-pie>
        </div>
      </div>
      <div class="ov_third_02 ov_third_list">
        <div class="ov_third_list_top">
          落地页面
        </div>
        <div class="ov_third_02_div">
          <ul>
            <li v-for="item,idx in ovLuoDi" :class="{LuoDi_act:idx+1 <= 3}">
              <p>{{idx + 1}}</p>
              <span>江西华邦传媒有限公司</span>
              <span>1234</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="ov_third_03 ov_third_list">
        <div class="ov_third_list_top">
          访问来源
        </div>
        <div class="ov_third_03_div">
          <ve-pie :data="chartData3"></ve-pie>
        </div>
      </div>
      <div class="ov_third_04 ov_third_list">
        <div class="ov_third_list_top">
          访问设备
        </div>
        <div class="ov_third_04_div">
          <ve-pie :data="chartData4"></ve-pie>
        </div>
      </div>
      <div class="ov_third_05 ov_third_list">
        <div class="ov_third_list_top">
          访客地域分布
        </div>
        <div class="ov_third_05_div">
          <ve-map :data="chartData5" :settings="chartSettings5"></ve-map>
        </div>
      </div>
      <div class="ov_third_06 ov_third_list">
        <div class="ov_third_list_top">
          爬虫统计
        </div>
        <div class="ov_third_06_div">
          <ve-line :data="chartData6" :settings="chartSettings6"></ve-line>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    this.chartSettings1 = {
      axisSite: { right: ['下单率'] },
      yAxisType: ['KMB', 'percent'],
      yAxisName: ['数值', '比率']
    }
    this.chartSettings5 = {
      position: 'china',
      dimension: '位置',
      metrics: ['访客数', '占比'],
      dataType: {
        '占比': 'percent'
      }
    }
    this.chartSettings6 = {
      axisSite: { right: ['下单率'] },
      yAxisType: ['KMB', 'percent'],
      yAxisName: ['数值', '比率']
    }
    return {
      value1: '',
      chartData1: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      },
      chartData2: {
        columns: ['访客', '访问用户'],
        rows: [
          { '访客': '新访客', '访问用户': 350 },
          { '访客': '老访客', '访问用户': 650 }
        ]
      },
      ovLuoDi: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      chartData3: {
        columns: ['访问方式', '访问用户'],
        rows: [
          { '访问方式': '直接访问', '访问用户': 350 },
          { '访问方式': '不明来源', '访问用户': 150 },
          { '访问方式': '搜素引擎', '访问用户': 250 },
          { '访问方式': '外部链接', '访问用户': 250 }
        ]
      },
      chartData4: {
        columns: ['访问端', '访问用户'],
        rows: [
          { '访问端': '移动终端', '访问用户': 350 },
          { '访问端': '电脑端', '访问用户': 650 }
        ]
      },
      chartData5: {
        columns: ['位置', '访客数', '占比'],
        rows: [
          { '位置': '吉林', '访客数': 123, '占比': 0.15 },
          { '位置': '北京', '访客数': 1223, '占比': 0.2 },
          { '位置': '上海', '访客数': 2123, '占比': 0.25 },
          { '位置': '浙江', '访客数': 4123, '占比': 0.4 }
        ]
      },
      chartData6: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
          { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
          { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
          { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
          { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
        ]
      }
    }
  }
}
</script>

<style>
.overview{
  width: 1620px;
  margin: 25px auto 25px;
}
.ov_first{
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ov_first li{
  width: 340px;
  height: 92px;
  background-color: #ffffff;
  padding: 25px 22px 43px 23px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.ov_first li div{
  width: 100%;
  height: 20px;
}
.ov_first li div span{
  font-size: 14px;
  color: #8c8c8c;
  flex: 1;
  display: block;
  float: left;
  line-height: 20px;
}
.ov_first li div img{
  width: 20px;
  height: 20px;
  display: block;
  float: right;
}
.ov_first .num{
  font-size: 38px;
  color: #262626;
}
.ov_second{
  width: 100%;
  height: 660px;
  background-color: #ffffff;
  margin-top: 25px;
}
.ov_second01{
  width: 1570px;
  height: 69px;
  border-bottom: 1px solid #eeeeee;
  margin: auto;
  position: relative;
}
.ov_second01 .el-range-editor{
  position: absolute;
  right: 0px;
  top: 50%;
  margin-top: -20px;
}
.ov_second02{
  width: 1570px;
  height: 165px;
  margin: auto;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
}
.ov_second02 li{
  width: 391px;
  height: 100px;
  border-right: 1px solid #eeeeee;
}
.ov_second02_li_div{
  width: 85px;
  height: 68px;
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.ov_second02_li_div span{
  font-size: 14px;
  color: #222222;
}
.ov_second02_li_div P{
  font-size: 14px;
  color: #222222;
}
.ov_second02 li:last-of-type{
  border: none;
}
.ov_second02 li:last-of-type .liuliang{
  width: 170px;
  height: 100px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.liuliang span{
  color: #222222;
  font-size: 14px;
}
.liuliang a{
  color: #468cfe;
  font-size: 14px;
  text-decoration: underline;
}
.ov_second03{
  width: 100%;
  height: 345px;
  overflow: hidden;
  margin-top: 60px;
}
.ov_third{
  width: 100%;
  height: auto;
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
}
.ov_third_list{
  width: 795px;
  height: 500px;
  background-color: #ffffff;
  margin-right: 30px;
  margin-bottom: 25px;
}
.ov_third_list:nth-child(2n){
  margin-right:0;
}
.ov_third_list_top{
  width: calc(100% - 30px);
  height: 59px;
  padding-left: 30px;
  border-bottom: 1px solid #eeeeee;
  font-size: 16px;
  color: #262626;
  line-height: 60px;
}
.ov_third_01_div,.ov_third_03_div,.ov_third_04_div,.ov_third_05_div,.ov_third_06_div{
  width: 100%;
  height: 400px;
  padding-top: 40px;
}
.ov_third_02_div{
  width: 795px;
  height: 440px;
  overflow: hidden;
}
.ov_third_02_div ul{
  width: 795px;
  height: 420px;
  margin-top: 20px;
}
.ov_third_02_div ul li{
  width: 730px;
  display: flex;
  align-items: center;
  margin: 0 auto 15px;
}
.ov_third_02_div ul li p{
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  background-color: #f5f5f5;
  font-size: 14px;
}
.ov_third_02_div ul li span{
  font-size: 14px;
  color: #262626;
}
.ov_third_02_div ul li span:nth-child(2){
  margin-left: 15px;
  flex: 1;
}
.LuoDi_act p{
  background-color: #314659 !important;
  color: #ffffff !important;
}
</style>
